<!-- 评论 -->
<template>
	<view class="comments">
		<!-- 整体评价 -->
		<view class="list1">
			<view class="title">您对商品整体满意度</view>
			<view class="item1">
				<view>整体评价</view>
				<view><uni-rate v-model="score" @change="onChange" :size="18" :margin="20" /></view>
			</view>
			<view class="item2">
				<view>商家服务</view>
				<view><uni-rate v-model="service" @change="onChange" :size="18" :margin="20" /></view>
			</view>
		</view>
		<!-- 商品数据 -->
		<view class="goodslist" v-for="(item, index1) in orderDteil.order_goods" :key="item">
			<view class="good">
				<image :src="item.goods_image" mode=""></image>
				<uni-rate v-model="evaluation[item.goods_id]" @change="onChange" :size="18" :margin="20" />
			</view>
			<view class="goodsComments">
				<textarea value="" v-model="content[item.goods_id]" placeholder="说出你的评价" />
				<view class="image">
					<u-upload
						:action="action"
						:custom-btn="true"
						max-count='3'
						:header="header"
						name='file'
						:multiple="true"
						:deletable='false'
						:show-progress="false"
						@on-success="(data, index, lists, name, num) => {successUpload(data, index, lists, name, item.goods_id)}"
					>
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
·
		<!-- 提交评价 -->
		<view class="btn"><view @click="submit">提交评价</view></view>
	</view>
</template>

<script>
import baseUrl from '../../utils/commonrequest.js'
export default {
	data() {
		return {
			header: {},
			baseUrl: baseUrl.baseUrl,
			action: '',
			orderId: '', // 订单id
			orderDteil: {}, // 订单数据
			service: 5, // 服务整体评价
			score: 5, // 整体评价
			evaluation: {}, // 商品评分
			image: {}, // 商品评论图片
			content: {}, // 商品评论内容
		};
	},
	onLoad(option) {
		this.action = this.baseUrl + 'Mini/comment/comment_upload'
		this.header.Authorization = 'Bearer ' + uni.getStorageSync('userInfo').token
		if (option.orderId) {
			this.orderId = option.orderId
			this.getOrderdetail()
		}
	},
	methods: {
		onChange() {},
		//  提交评价
		submit() {
			var that = this
			
			let data = {}
			data.order_id = that.orderId
			//  商品评分
			data.evaluation = JSON.stringify(that.evaluation)
			//  商品评论图片
			data.image = JSON.stringify(that.image)
			//  商品评论内容
			data.content = JSON.stringify(that.content)
			//  总体评分
			data.score = JSON.stringify(that.score)
			//  整体服务评价
			data.service = JSON.stringify(that.service)
			that.$mrequest({
				url: 'Mini/comment/store',
				method: 'POST',
				data: data,
				callBack: function callBack (res) {
					console.log('评论成功！', res);
					if (res.code == 200) {
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				fail: function fail (res) {
					console.log('评论失败！', res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//  获取订单详情
		getOrderdetail() {
			var that = this
			this.$http.post({
				url: 'Mini/order/orderInfo',
				data: {
					order_id: that.orderId
				}
			}).then(res => {
				if (res.status) {
					that.orderDteil = res.data
					that.orderDteil.order_goods.map((v, n) => {
						that.image[v.goods_id] = []
						that.evaluation[v.goods_id] = 5
						that.content[v.goods_id] = ''
					})
					console.log('评分！', that.evaluation)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		},
		//  上传图片返回
		successUpload(data, index, lists, name, num) {
			console.log('data:', data,'index:', index, 'lists:', lists, 'name:', name, 'num:', num)
			if (data.code == 200) {
				this.image[num].push(data.data)
				console.log('打印image', this.image)
			}
		},
	}
};
</script>

<style lang="scss">
page {
	background: #f7f6f9;
}
.comments {
	width: 100%;
	box-sizing: border-box;
	padding: 16rpx 32rpx;
	padding-bottom: 60rpx;

	.btn {
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		overflow: hidden;
		view {
			width: 100%;
			height: 90rpx;
			margin-top: 30rpx;
			background: linear-gradient(-74deg, #70dac4, #3ec4a7);
			border-radius: 45rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.goodslist {
		width: 100%;
		// height: 535rpx;
		background: #ffffff;
		border-radius: 15rpx;
		padding: 26rpx;
		margin-top: 20rpx;
		.good {
			width: 100%;
			height: 170rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image {
				width: 141rpx;
				height: 141rpx;
			}
		}
		.goodsComments {
			width: 100%;
			background: #eff0f7;
			margin-top: 20rpx;
			textarea {
				padding: 30rpx;
				width: 100%;
				height: 80rpx;
				// box-sizing: border-box;
			}
			.image {
				width: 100%;
				height: 200rpx;
				// padding-left: 30rpx;
				box-sizing: border-box;
				.u-list-item.data-v-0d33af60{
					margin: 0!important;
				}
			}
		}
	}

	.list1 {
		width: 100%;
		height: 344rpx;
		padding: 50rpx 40rpx;
		background: #ffffff;
		border-radius: 15rpx;
		.title {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 60rpx;
		}
		.item1,
		.item2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.item1 {
			margin-bottom: 60rpx;
		}
	}
}
.upload{
			&>image{
				margin-top: 10rpx;
				display: block;
				width: 225rpx;
				height: 225rpx;
			}
			.slot-btn {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgb(244, 245, 246);
				border-radius: 10rpx;
			}
			
			.slot-btn__hover {
				background-color: rgb(235, 236, 238);
			}
		}
</style>
